<template>
  <div class="all-modules-container">
    <vuedraggable
      class="wrapper"
      v-model="list"
      :group="group"
      :sort="true"
      @start="start"
    >
      <transition-group>
        <div v-for="item in list" :key="item.moduleName">
          <img :src="item.imgUrl" alt="" class="item-class" />
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import { nanoid } from 'nanoid'
import DragItem from '@/components/Modules/DragItem.vue'
export default {
  name: 'AllModules',
  props: {},
  data() {
    return {
      list: [
        {
          moduleName: 'Avatar',
          imgUrl: '/static/module-img/Avatar02.png',
        },
        {
          moduleName: 'BasicInfo',
          imgUrl: '/static/module-img/BasicInfo02.png',
        },
        {
          moduleName: 'BasicInfoLeft',
          imgUrl: '/static/module-img/BasicInfoLeft02.png',
        },
        {
          moduleName: 'EduExperience',
          imgUrl: '/static/module-img/EduExperience02.png',
        },
        {
          moduleName: 'Awards',
          imgUrl: '/static/module-img/Awards02.png',
        },
        {
          moduleName: 'JobIntension',
          imgUrl: '/static/module-img/JobIntension02.png',
        },
        {
          moduleName: 'Skill',
          imgUrl: '/static/module-img/Skill02.png',
        },
        {
          moduleName: 'ProjectExperience',
          imgUrl: '/static/module-img/ProjectExperience02.png',
        },
        {
          moduleName: 'WorkExperience',
          imgUrl: '/static/module-img/WorkExperience02.png',
        },
        {
          moduleName: 'SelfAssessment',
          imgUrl: '/static/module-img/SelfAssessment02.png',
        },
        {
          moduleName: 'BlankTemplate',
          imgUrl: '/static/module-img/BlankTemplate02.png',
        },
      ],
      group: {
        name: 'people',
        // 是否允许拖出当前组
        pull: 'clone',
        // 是否允许拖入当前组
        put: false,
      },
    }
  },
  methods: {
    start({ oldIndex }) {
      // 每次拖动前，为模块赋值一个新的id
      const source = this.list[oldIndex]
      this.$set(source, 'id', `${nanoid()}`)
    },
  },
  components: {
    vuedraggable,
    DragItem,
  },
}
</script>

<style lang="less" scoped>
.all-modules-container {
  margin-left: -15px;
  height: 500px;
  overflow: auto;

  /deep/ input {
    border: none;
    color: #fff;
  }

  .item-class {
    margin-bottom: 10px;
    margin-left: 10px;
    width: 480px;
  }
}
</style>
